<template>
  <cjui-page-panel header="瀑布流">
    <template #intro>
      效果如下区域。
    </template>
    
    <div>
      <el-button type="primary" @click="count += 1">
        列数增加
      </el-button>
      <el-button type="primary" @click="count -= 1">
        列数减少
      </el-button>
      <el-button type="primary" @click="addText">
        条数增加
      </el-button>
    </div>

    <cjui-water-fall-row ref="wfrowRef" :count="count" :xs="count - 1">
      <cjui-water-fall-col v-for="(item, i) in columnsText" :key="i">{{ item }}</cjui-water-fall-col>
    </cjui-water-fall-row>
  </cjui-page-panel>
</template>

<script lang="ts" setup>
const count = ref(3)
const columnsText = ref([
  '瀑布流文本瀑布流文本瀑布流文本瀑布流文本瀑布流文本瀑布流文本瀑布流文本',
  '瀑布流文本瀑布流文本瀑布流文本瀑布流文本瀑布流文本',
  '瀑布流文本瀑布流文本瀑布流文本瀑布流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本',
  '瀑布流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本',
  '瀑布流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本',
  '瀑布流文本瀑布流文本流文本瀑布流文本',
  '瀑布流文本瀑布流文本瀑布流文本瀑布流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本',
  '瀑布流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本',
  '瀑布流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本'
])

const wfrowRef = ref()
function addText() {
  columnsText.value.push('瀑布流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本')
  columnsText.value.push('瀑布流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本')
  columnsText.value.push('瀑布流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本流文本瀑布流文本')
  wfrowRef.value.renderNew()
}
</script>

<style lang="scss" scoped>
:deep(.cjui-wfcol-body) {
  background: #c9c9c9;
  padding: 15px;
  border: 2px;
  color: #5e6d82;
}
</style>
